<template>
  <div id="line" :style="size">
    <div class="dragRectTop"></div>
    <Echarts :size="size" :options="options" />
    <div class="dragRectBottom"></div>
  </div>

</template>

<script>
import Echarts from '@/components/Echarts'
export default {
  data () {
    return {
      options: {
				title: {
					text: '新冠疫情年龄分布情况',
					left: 'center',
					top: '5',
					textStyle: {
						color: '#fff',
						fontSize: '20'
					}
				},
        tooltip: {
          trigger: 'item',
					// 数据显示的格式
					formatter: '{a} <br/> {b}:{c}({d}%)'
        },
        legend: {
          top: '90%',
          left: 'center',
					itemWidth: 10,
					itemHeight: 10,
					data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
					textStyle: {
						color: 'rgba(255,255,255,0.6)',
						fontSize: '12'
					}
        },
        series: [
          {
            name: '年龄分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
						color: ['#065aab', '#066aab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06dcab', '#06f0ab'],
            label: {
              show: false,
              position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: [
              { value: 1, name: '0岁以下' },
              { value: 4, name: '20-29岁' },
              { value: 2, name: '30-39岁' },
              { value: 2, name: '40-49岁' },
              { value: 1, name: '50岁以上' }
            ]
          }
        ]
      },
      size: {
        width: "100%",
        height: "3.875rem"
      },
      year: 2000
    }
  },
  components: {
    Echarts
  },
  mounted () {
  }
}
</script>

<style scoped>
	#line{
		background-image: url(../assets/line.png);
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
	.dragRectTop{
		width: 100%;
		height: 10px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.dragRectTop::before{
		width: 10px;
		height: 10px;
		border-left: 2px solid #02a6b5;
		border-top: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;

	}
	.dragRectTop::after{
		width: 10px;
		height: 10px;
		border-right: 2px solid #02a6b5;
		border-top: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		right: 0;
		top: 0;

	}
	.dragRectBottom{
		width: 100%;
		height: 10px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.dragRectBottom::before{
		width: 10px;
		height: 10px;
		border-left: 2px solid #02a6b5;
		border-bottom: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;

	}
	.dragRectBottom::after{
		width: 10px;
		height: 10px;
		border-right: 2px solid #02a6b5;
		border-bottom: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;

	}
</style>